<template>
    <div class="flex flex-1 flex px-[100px] mt-8">
        <div class="flex h-[240px] flex-col">
            <el-image style="width: 200px; height: 200px" :src="goodsDetail.goodsImg" fit="cover" />
            <div class="flex flex-col justify-between ml-2">
                <div class="mb-1">{{ goodsDetail.goodsName }}</div>
                <div class="mb-2">￥{{ goodsDetail.goodsPrice }}/{{ goodsDetail.goodsSpec }}</div>
            </div>
        </div>
        <div class="ml-8">
            <el-timeline style="max-width: 600px">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ShoppingTrolley } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getGoods, getComments } from '@/apis/goods'
import { addCart } from '@/apis/cart'
import { addOrder, addRuleOrder, registerRule } from '@/apis/order'
import { getGroupRuleList } from '@/apis/group'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode'
import dayjs from 'dayjs'
const route = useRoute()
const router = useRouter()
const goodsId = ref()
const goodsDetail = reactive({
    goodsImg: '',
    goodsName: '',
    goodsPrice: '',
    goodsSpec: '',
    storeId: null
})
const activities = ref([])

const getDetail = async () => {
    const res = await getGoods(goodsId.value)
    console.log(res)
    Object.assign(goodsDetail, res)
    activities.value = [{
        timestamp: dayjs(res.createTime).format('YYYY-MM-DD'),
        content: '产品由' + res.storeName + '店铺上架'
    }]
}


onMounted(() => {
    const { id } = route.query
    goodsId.value = id
    getDetail()
})
</script>

<style scoped></style>
